<template>
<div>
<div class="table">
		<row>
		    <div class="divmenu">
			    <Col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
				     <Button type="primary" size="large" @click="Add">
					     <p class="title">
						     <Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;<span>新增</span>
					     </p>
				     </Button>
			     </Col>
		    </div>
	    </row>
		<div class="divSearch"><!--搜索框-->
			<Row>
				<Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                <label class="searchLabel">市&nbsp;&nbsp;&nbsp;(州):</label>
                <!--<Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange' class="searchInput" style="float:left"></Cascader>-->
                    <Select v-model="SearchModel.ParentCode"  placeholder="请选择..." class="searchInput" @on-Change="Search()">
                        <Option :value="userinfo.AreaCode">全市(州)</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
				<Col :lg="{span:6}" :md="{span:10}" :sm="{span:12}" :xs="{span:13}">
					<label class="searchLabel">地区名称:</label>
					<Input type="text" v-model="SearchModel.Name"  placeholder="请输入行政区划名称" class="searchInput"> </Input>			
				</Col>    
				<!--<Col :lg="{span:4,offset:1}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
					<Input type="text"  size="large" v-model="SearchModel.RoleName"  placeholder="请输入行政区划代码" >
                        <span slot="prepend">行政区划代码:</span>
                    </Input>							
				</Col> 
				<Col :lg="{span:1,offset:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"   class="searchLabel">
					<label>所属州市:</label>
				</Col>     
				<Col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
					<Select v-model="SearchModel.Status" size="large" placeholder="请选择行政区划所属州市" >
						<Option value="">全部</Option>                    
						<Option value="1">启用</Option>
						<Option value="0">禁用</Option>
					</Select>								
				</Col> --> 
				<Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
					<Button icon="ios-search" type="primary" @click="Search()" style="margin-top:3px;margin-left: 10%;">查询</Button>
				</Col>   
			</Row>
		</div>		
	    <row><!--数据表格-->
		    <Col>
			    <Table :context="self" ref="table" :stripe=true border   :columns="TableHeader"
				 :data="datas.rows" size="large" @on-select-all="selectAll()"
				  @on-select="selectSingel()" :height="clientHeight">
				</Table>
		    </Col>
		</row>
		 <row><!--分页插件-->       
				<Col>
					<!-- <spin size="large"></spin> -->
					<Page class="pageComponent" :total="datas.total" show-elevator show-sizer show-total placement="top" 
						@on-change="changePage"  @on-page-size-change="changePageSize" :page-size="20"
					:page-size-opts='pageSizeOpts'>
					</Page>
				</Col>
            </row>
    </div>
    <!--水果生产经营实体情况调查表-->
     <Modal v-model="ShowModal"  :mask-closable="false" >
	    <p slot="close" @click="cancel('AreaModel')"> <Icon type="close-circled" color="red" size="25"></Icon></p>
	    <p slot="header"  class="title">   
		    <Icon type="leaf" color="green" size="20"></Icon>     
            <span style="font-size: 20px">行政区划编辑</span>
        </p>
		<Form ref="AreaModel" :model="AreaModel" :rules="AreaRule" :label-width="80">
			<Form-item style="display:none;" prop="Id">
        		<Input v-model="AreaModel.Id" ></Input>
        	</Form-item>
			<Form-item label="代码" prop="Code">
				<Input v-model="AreaModel.Code" placeholder="请输入代码"></Input>
			</Form-item>   
			<Form-item label="父级代码" prop="ParentCode">
				<Input v-model="AreaModel.ParentCode" placeholder="请输入父级代码"></Input>
			</Form-item>   
			<Form-item label="名称" prop="Name">
				<Input v-model="AreaModel.Name" placeholder="请输入名称"></Input>
			</Form-item>
			<Form-item label="全名" prop="FullName">
				<Input v-model="AreaModel.FullName" placeholder="请输入全名"></Input>
			</Form-item>
		</Form>
	    <div slot="footer">	
                <Button  @click="cancel('AreaModel')">取消</Button>&nbsp;&nbsp;
                <Button  type="primary"   @click="handleSubmit('AreaModel')">提交</Button>
        </div>
    </Modal>
</div>
</template>
<script>
export default {
	data(){
		return {
			self:this,
			tableTotal:0,//表格记录条数
	        ShowModal:false,//model开关,针对form填报表格
			datas: {},//table数据对象
			clientHeight:window.innerHeight-340,//设置表格高度
			userinfo: this.GetlocaStorage("VegUserInfo"),
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			AreaList: this.SearchAreaList(this.GetlocaStorage("VegUserInfo").AreaCode), //所属行政区划数组,
	        TableHeader:[
				//{type: 'selection',width: 60,align: 'center'},
	            {title:'地区代码',key:'Code'},
	            {title:'父级代码',key:'ParentCode'},
				{title:'地区简称',key:'Name'},	
				{title:'地区全称',key:'FullName'},														
				{title: '操作',key: 'action',width: 200,align: 'center',
					render:(h,params)=>{
						return h('div', [
											h('Button', { class:{ieditColor:true},props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id) }}}, '编辑'),
											h('Button', { class:{ideleteColor:true},props: {type:'ghost',size:'small',icon:'ios-trash-outline'},on: {click: () => {this.Remove(params.row.Id); }}}, '删除')])
	                }
				}
            ],
			SearchModel:{
				PageNumber:1,//页码
				PageSize:20,//页面数量
				Code:'',ParentCode:'',Name:'',Id:''
			},
	        AreaModel: {//V-model
				Code:'',ParentCode:'',Name:'',FullName:'',Id: 0
	        },
	        //表单验证规则
	        AreaRule: {//表单验证规则
				Code:[ { required: true, message: '请填写地区代码', trigger: 'blur' }],
	        	// ParentCode:[ { required: true, message: '请选择所属州市', trigger: 'change' }],
	        	Name:[ { required: true, message: '请填写地区名称', trigger: 'change' }],
	        	FullName:[ { required: true, message: '请填写地区名称', trigger: 'change' }],
	        }
		}
	},
    mounted:function(){
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight-340;
            })()
        };

    },
	methods:{
		//查询方法
		Search() {
			this.initTableData();
		},
		Add:function(){//添加数据
			this.AreaModel.Code=0;
			this.showModel();
		},
        showModel:function(){
            this.ShowModal=true;//显示对话框  
			// this.GetCity();    
        },
        handleSubmit (name) {//数据提交
			var self=this;
			self.$refs[name].validate((valid) => {
					if (valid) {
						if(self.AreaModel.Id==0)
						{
							//数据添加
							this.$http.post('Area',self.AreaModel).then(
								function(res){
									if(res.data.status==1)
									{
										self.initTableData();
										self.$refs[name].resetFields();//重置model
										self.ShowModal=false;
										self.$Notice.success( {title:"信息添加成功"});
									}
									else{
										self.$Notice.warning( {title:"信息添加失败"});
									}
								});
						}
						else{
							//数据编辑
							self.$http.put('Area',self.AreaModel).then(
								function(res){
									if(res.data.status==1)
									{
										self.initTableData();
										self.$refs[name].resetFields();//重置model
										self.ShowModal=false;
										self.$Notice.success( {title:"数据编辑成功"});
									}
									else{
										self.$Notice.warning( {title:"数据编辑失败"});
									}
									self.AreaModel.Code=0;
							});		
						}
					}
				});
            },
            cancel:function(name){//关闭新增对话框
                this.$refs[name].resetFields();//关闭表单校验
                this.ShowModal=false;//关闭对话框
            },
            //批量删除
            Removes:function(id,index){//批量删除
                this.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据删除后不可恢复，确定要删除？</p>',
                    onOk: () => {
                        this.tabledata=[];
                        this.$Notice.success({title:"数据删除成功"});
                        this.tableTotal=this.tabledata.length;
                    }
                });
            },
			Remove :function(ID) {//删除单条数据
				var  self=this;
                self.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据删除后不可恢复，确定要删除？</p>',
                    onOk: () => {
						this.$http.delete("Area",{ params: { id: ID } }).then(
							function(res){
								if(res.data.status==1)
								{
									self.$Notice.success({title:"数据删除成功"});
									self.initTableData();
								}
								else{
									self.$Notice.error({title:"数据删除失败"});
								}
							}
						)
                    }
                });             
            },
            Edit:function(id){//编辑数据	
				var self=this;
				this.$http.get("Area", { params: { id: id } }).then(//获取数据编辑项的值
					function(res){
						if(res.data.status==1)
						{
							self.AreaModel=res.data.model;
							//self.AreaModel.Code=Code;
							self.showModel();
						}
						else{
							self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
						}
					}
				)            
            },
            initTableData:function(SearchModel){//初始化数据
				var self=this;
                this.$http.post("Area/PostPageList",this.SearchModel).then(function(res){
					if(res.data.status==1)
					{	
						self.datas = res.data;
					}
					else{
						self.$Modal.error({ title: '提示信息', content: res.data.message });
					}
                })
            },
            changePage:function(pageIndex){//改变页码事件
				this.SearchModel.PageNumber=pageIndex;
				this.initTableData();
            },
			changePageSize:function(pageSize){//改变页面记录条数事件
				this.SearchModel.PageSize=pageSize;
				this.initTableData();
			}
        },
        created:function(){ //初始化函数
			this.initTableData();
        }
}
</script>